a<template lang="html">
  <!-- 主要内容 -->
  <div class="content_list">
    <div class="content_item" v-for='items in info.list' v-if='items.type == 0'>
      <div class="content_img">
        <img :src="items.titleImg" alt="">
        <div class="content_info">
          <div class="content_info_title">
            {{ items.title}}
          </div>
          <div class="content_info_sub">
            {{ items.subTitle }}
          </div>
          <div class="content_info_more">
            进入专题
          </div>
        </div>
        <div class="view_enter">
          <!-- <img src="secoo/static/img/jianhuo_show.png" alt=""> -->
          {{ items.showNumber}}
        </div>
      </div>
      <div class="view_coo">
        <ul>
          <li v-for='shows in items.products'>
            <div class="show_img">
              <img :src="shows.img" alt="">
            </div>
            <div class="show_title">
              {{ shows.name}}
            </div>
            <div class="show_price">
              {{ '￥'+ shows.price}}
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="content_item" v-else>
      <div @click='change()' class="user_box">
        <div class="user_info">
          <div class="user_icon">
            <img :src="items.showUserImg" alt="">
          </div>
          <div class="user_des">
            <div class="user_name">
              {{ items.showUserName}}
            </div>
            <div class="user_time">
              {{ items.showTime}}
            </div>
          </div>
        </div>
        <div class="user_content">
          <div class="content_a">
            {{ items.content | slice() }}
            <em>...</em>
            <span @click='change()'>查看详情</span>

          </div>
        </div>
      </div>
      <div class="user_img">
        <ul>
          <li v-for='imgs in items.showImgs'>
            <img @click='change()' :src="imgs" alt="">
          </li>
        </ul>
      </div>
      <div class="btn_group">
        <div class="zan">
          <!-- 绑定点击事件 参数是事件对象，和点赞的数 -->
          <div @click='gray($event,items)' alt="">{{ items.praiseCount }}</div>
        </div>
        <div class="by">
          <span @click='buy()'>去购买</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {}
    }
  },
  filters: {
    slice(content) {
      return content.slice(0,50);
    },
  },
  created() {
    this.axios.get('../static/data/jianhuo2.json').then(obj=> {
      this.info = obj.data;
      // console.log(this.info);
    })
  },
  methods: {
    change() {
      this.$router.push({path:'../pages/xiangqing'});
    },
    // 触发gray方法时传入事件对象和当前赞的个数，通过判断事件对象target 下的classList的length的长度，如果有值得话就删除当前类，否则的话加上
    gray(e,c) {
      if (e.target.classList.length) {
        e.target.classList.remove('changeImg')
        // console.log(c.praiseCount-=1);
        c.praiseCount-=1
        // console.log(c);

      }else{
        console.log(e);
        e.target.classList.add('changeImg')
        // console.log(c.praiseCount+=1);
        c.praiseCount+=1
      }
    },  
    buy() {
      this.$router.push({path:'../pages/toBuy'})
    }

  },
  props:["id"],
  // 监听id值得变化
  watch: {
    id(newId,oldId){
      let url = '../static/data/jianhuo' + this.id +".json";
      this.axios.get(url).then(obj=> {
        // console.log(obj);
        this.info = obj.data;
        // console.log(this.info);
      })
    }
  }
}
</script>

<style lang="css">
  /*主要内容中广告商品样式*/
  .content_list {
    width: 100%;
    margin-bottom: .8rem;
  }
  .content_item {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: .4rem;
  }
  .content_img {
    width: 92%;
    /*height: 3.2rem;*/
    margin-left: 4%;
    position: relative;
  }
  .content_img img {
    width: 100%;
  }
  .content_info {
    position: absolute;
    top: 1rem;
    left: 15%;
    line-height: .4rem;
    /*text-align: center;*/
  }
  .content_info .content_info_title {
    width: 100%;
    font-size: .35rem;
    font-weight: 900;
    color: white;
    text-align: center;
  }
  .content_info .content_info_sub {
    width: 100%;
    text-align: center;
    font-size: .22rem;
    color: white;
    margin-left: 4%;
  }
  .content_info .content_info_more {
    width: 30%;
    height: .4rem;
    line-height: .4rem;
    text-align: center;
    font-size: .2rem;
    background: white;
    margin-left: 35%;
    margin-top: .2rem;
  }
  .content_img .view_enter {
    position: absolute;
    top: 2.8rem;
    right: 3%;
    font-size: .2rem;
    color: white;
  }
  .content_img .view_enter::before {
    content: "";
  }
  .view_coo {
    width: 100%;
    /*height: 2.7rem;*/
    padding-top: .3rem;
    padding-bottom: .4rem;
  }
  .view_coo ul {
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .view_coo ul li {
    width: 25%;
    text-align: center;
    font-size: .2rem;
  }
  /*.view_coo ul li .show_img {
    width: 100%;
    height: 1.7rem;
  }*/
  .view_coo img {
    width: 100%;
    /*height: 1.7rem;*/
  }
  .view_coo ul li .show_title {
    padding-top: .2rem;
    padding-bottom: .1rem;
  }
  /*用户晒单样式*/
  .content_item .user_box {
    width: 94%;
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    margin: 0 auto;
  }
  .content_item .user_box .user_info {
    width: 94%;
    height: .8rem;
    display: flex;
    justify-content: space-around;
    /*margin-top: .4rem;*/
    margin-bottom: .3rem;
  }
  .content_item .user_info .user_icon {
    width: 16%;
  }
  .content_item .user_info .user_icon img {
    width: 79%;
    border-radius: 50%;
    vertical-align: middle;
  }
  .content_item .user_info .user_des {
    width: 80%;
    font-size: .2rem;
  }
  .content_item .user_des .user_time {
    color: #999;
  }
  .content_item .user_content {
    width: 100%;
  }
  .content_item .user_content .content_a {
    font-size: .25rem;
    /*height: .7rem;*/
    line-height: .3rem;
    margin-top: 0;
    /*overflow: hidden;
    text-overflow: ellipsis;*/
    /*display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;*/
  }
  .content_item .user_content span {
    color: #BEA474;
    font-size: .25rem;
  }
  .content_item .user_img {
    width: 96%;
    /*height: 2.8rem;*/
    margin: .3rem auto;
    overflow: auto;
  }
  .content_item .user_img ul {
    /*width: 130%;*/
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-around;*/
  }
  .content_item .user_img li {
    width: 48%;
    display: flex;
    margin-left: 2%;
    margin-top: .15rem;
  }
  .content_item .user_img img {
    width: 100%;
    height: 2.8rem;
  }
  .btn_group {
    width: 100%;
    height: .7rem;
    display: flex;
    align-items: center;
    border-top: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
  }
  .btn_group .zan, .btn_group .by {
    width: 49.5%;
    height: .7rem;
    line-height: .7rem;
    text-align: center;
  }
  .btn_group .zan {
    border-right: 1px solid #EBEBEB;
  }
  .btn_group .by::after {
    content: '\2192';
  }
  .zan>div{
    display: inline-block;
    padding: 0 .4rem;
    height: 100%;
    background:  url("../../static/img/zan3.png") no-repeat;
    background-position: 0 .2rem;
  }
  .zan>.changeImg{
    background:  url("../../static/img/zan2.png") no-repeat;
    background-position: 0 .2rem;
  }
</style>
